<template>
	<view class="contain">
		<view class="pjclass">
			<view v-for="(item,index) in pjclass">
				<view class="box" :class="pjIndex===index?'selectBox':''" @click="choicePJ(index)">
				<u-icon name="checkbox-mark" color="#f22d11" size="18" v-if="pjIndex===index"></u-icon>
				{{item.name}}{{item.number!=""?item.number:""}}
				</view>
			</view>
		</view>
		<view class="dataList" v-for="(item,index) in dataList" @click="goReply">
			<view class="userInfo">
				 <u-row align="top">
					<u-col span="1" justify="center" textAlign="center">
						<view><image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F21%2F20200521143558_mdhsk.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702994421&t=4c6d4b56ef93f56a2dab1164e2141636" style="width:60rpx;height:60rpx;border-radius:100%;"></image></view>
					</u-col>
					<u-col span="8" justify="start" textAlign="left" align="top">
						<view class="uanme"><text>{{item.user}}</text> <u-rate :gutter="0" :size="13" readonly :count="item.item" v-model="item.value" style="margin-left:20rpx;"></u-rate></view>
					</u-col>
					<u-col span="3" justify="end" textAlign="right">
						<view class="date">{{item.date}}</view>
					</u-col>
				</u-row>
			</view> <!-- userInfo End -->
			<view class="dataBody">
				<text class="tword">东西不错，分量充足，口味纯正，小孩子吃了很快乐。这个应该算果冻—类的吧，添加剂应该还是有的，保质期也是比较长的，很好很不错的。冰冻以后更好吃。妈妈再也不用烦零食了，吃起来也是非常滋味的东西—斤来了。</text>
				<!-- 小图列表 -->
				<view class="littleimgs flex justify-start mt-2">
					<view v-for="(phitem,phindex) in item.littleimgs" @click="preViewImage(item.littleimgs,phindex)">
						<image :src="phitem"></image>
					</view>
				</view>
				<!-- 主题/回复 -->
				<view class="reply mt-2 flex justify-between">
					<view class="text-gray-400 text-xs">{{item.title}}</view>
					<view class="flex justify-between">
						<view class="relative -top-1 right-1"><u-icon name="chat" color="#2979ff" size="22"></u-icon></view>
						<view class="text-blue-500 text-xs mr-1">2</view>
						<text class="text-blue-500 text-xs">回复</text>
					</view>
				</view>
			</view> <!-- dataBody End -->
		</view> <!-- dataList End -->
	</view>
</template>

<script setup lang='ts'>
	import { Toast } from '@/utils/utils';
	import { ref,reactive } from 'vue'
	const props=defineProps({
		dataList:{
			type:Array,
			default:[
				{
					title:"芥末花生100g/袋装",
					user:"小***美",
					date:"2023-10-11",
					count:5,
					value:5,
					littleimgs:[
						"https://img13.360buyimg.com/n1/jfs/t1/75605/23/24807/101847/64489322F2d4851b5/08e043052c7ba051.jpg.avif",
						"https://img14.360buyimg.com/n0/jfs/t1/130076/24/37795/158525/64c1eb3cF599ce766/f845e6d058a3373c.jpg.avif"
					]
				},
				{
					title:"饼干 200g/袋装",
					user:"小***连",
					date:"2023-09-05",
					count:3,
					value:2,
					littleimgs:[
						"https://img14.360buyimg.com/n0/jfs/t1/192612/30/42592/179694/654fa856F37950669/5d29d73fe673c7b4.jpg.avif"
					]
				},
			]
		}
	})
	
	const goReply=()=>{
		uni.$tools.GoUrl("/pages/shop_comment_reply/shop_comment_reply");
	}
	
	const preViewImage=function(imgsArr:string[],index:number){
		uni.previewImage({
			current:imgsArr[index],
			urls:imgsArr
		})
	}
	let pjIndex=ref(0);
	const choicePJ=function(index:number){
		pjIndex.value=index;
		uni.$tools.Toast("查看"+pjclass[index].name+pjclass[index].number);
	}
	const pjclass=reactive<Object>([
		{
			name:"全部",
			number:"(200+)"
		},
		{
			name:"最新",
			number:"",
		},
		{
			name:"好评",
			number:"(30+)"
		},
		{
			name:"差评",
			number:"(7)"
		},
		{
			name:"视频晒单",
			number:"(1)"
		},
		{
			name:"有图",
			number:"(2)"
		},
	]);
</script>

<style lang='scss' scoped>
	@import "replyComment.scss";
</style>